<template>
  <div>
    <!-- menus -->
    <LsTabs v-model="currentKey" type="menus" :data="options" @change="changeOption"></LsTabs>
    <!-- tabs -->
    <LsTabs v-model="currentKey" type="tabs" :data="options" @change="changeOption"></LsTabs>
    <!-- tabs fill="false"-->
    <LsTabs
      v-model="currentKey"
      type="tabs"
      :data="options"
      @change="changeOption"
      :fill="false"
    ></LsTabs>
    <!-- tags -->
    <LsTabs v-model="currentKey" type="tags" :data="options" @change="changeOption"></LsTabs>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const currentKey = ref(1)
const options = ref([
  { label: '选项一', value: 1, ribbonValue: 'top', ribbonStyle: 'background: #409eff;' },
  { label: '选项二', value: 2, number: 3 },
  { label: '选项三', value: 3, disabled: true, ribbonValue: 'top' },
  { label: '选项四', value: 4, number: 1 },
  { label: '选项五', value: 5, ribbonValue: 'top', ribbonStyle: 'background: #ff4d4f;' }
])
const changeOption = (val) => {
  console.log(val)
}
</script>
<style scoped></style>
